<!-- 上传附件组件 -->
<template>
  <div>
    <p style="font-weight:600" v-show="!(limit == 1 && fileLists.length > 0)">
      <span v-show="showDownloadTemp" class="temp fl" @click="downloadTemp"
        style="color:#346FFE;margin-right:5px;margin-bottom:10px;font-weight:400;cursor: pointer;">(下载模板)</span>
      <span class="tag">{{ tag }}</span>
      <el-upload :accept="accept" :limit="limit"
        :multiple="multiple"  :headers="headers" :on-exceed="handleExceed" v-loading="uploading"
        :action="uploadUrl" :show-file-list='false'
        :before-upload="beforeUpload" :on-success="fileUploadSuccess"
        style="display:inline-block; margin: 0 0 10px 0">
        <el-button type="primary" class="up-btn">
          <i class="up_ico"></i>
          <span>上传文件</span>
        </el-button>
      </el-upload>
    </p>
    <p v-show="acceptTip" class="tips" style="font-size: 12px; color: #bbb;line-height: 10px;margin-bottom: 10px;">
      *{{ acceptTip }}</p>
    <div v-for="(successFile, index) in fileLists" :key="index" class="uploadFileItem">
      <div class="file-shadow" style="display: inline-block;margin-bottom: 10px">
        <i class="el-icon-s-order"></i>
        <span class="formFile">{{ successFile.newFileName }}</span>
        <img class="icon-download" src="@/assets/images/delete.png" @click="deleteFile(index, successFile)">
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  name: 'upload',
  // data:上传参数
  // actionUrl:上传接口,默认/file/uploadFileCommon
  // accept:文件格式限制
  // acceptTip:提示
  // limit:限制上传文件个数，默认不限制
  // showDownloadTemp:是否显示下载模板按钮
  props: ['value', 'data', 'actionUrl', 'accept', 'multiple', 'acceptTip', 'limit', 'tag', 'showDownloadTemp'],
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/confiscate/forfeitureOfDeposit/uploadMsFile", // 上传的图片服务器地址
      httpHeader: 'http://localhost:8899',
      headers: {
        Authorization: "Bearer " + getToken()
      },
      uploading: false,
      fileLists: []
    }
  },
  watch: {
    value: {
      handler(n) {
        this.fileLists = n ? n : []
      },
      immediate: true
    }
  },
  methods: {
    beforeUpload(file) {
      this.uploading = true
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.'))
      const whiteList = this.accept ? this.accept.split(',') : []
      if (whiteList.length > 0 && whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件只支持 ' + this.accept.split(',').join('、') + ' 等格式')
        this.uploading = false
        return false
      }
      const obj = this.fileLists.find(item => item.originalName === file.name);
      if (obj !== undefined) {
        this.$message.error('不能上传同名文件');
        this.uploading = false
        return false;
      }
    },
    // 文件上传成功
    fileUploadSuccess(res, file, fileList) {
      const { data, success, info, code } = res;
      if (code === 4001) return (window.location.href = '/login?redirectUrl=' + window.location.href);
      if (true) {
        if (true) {
          let lis = []
          //由于fileList是所有的文件包含之前已上传过的，这里需要做区分（带response的即为新上传的）
          fileList.map(item => {
            if (item.response?.fileTables.length) {
              lis.push(item.response.fileTables[0])
            }
          })
          this.fileLists = lis
          this.uploading = false;
        }
        this.$emit('input',  this.fileLists)
      } else {
        this.uploading = false;
        this.$message.error(info)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传${this.limit}个文件`);
    },
    // 删除文件
    deleteFile(index, successFile) {
      this.fileLists.splice(index, 1)
      this.$emit('input', this.fileLists)
    },
    // 下载模板
    downloadTemp() {
      this.$emit('downloadTemp')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.up-btn {
  span {
    line-height: 16px !important;
  }

  .up_ico {
    vertical-align: middle;
    margin-right: 3px;
    content: url('~@/assets/images/up_ico_white.png') !important;
  }
}

.tag {
  display: inline-block;
  max-width: 140px;
  vertical-align: middle;
  line-height: 18px;
  margin-right: 3px;
}

.uploadFileItem {
  height: 32px;
  width: 380px;
  background: #f6f8fc;
  border-radius: 2px;
  margin-bottom: 10px;
  padding: 0 0 0 5px;

  .el-icon-s-order {
    transform: translateY(-11px);
    font-size: 18px;
    color: #346ffe;
    margin-right: 5px;
  }

  .file-shadow {
    line-height: 32px;
  }

  .formFile {
    width: 335px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }

  .icon-download {
    margin-left: 5px;
    transform: translateY(-11px);

    &:hover {
      cursor: pointer;
    }
  }
}
</style>